<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../element/element.css">
    <script src="../../element/vue.js"></script>
    <script src="../../element/element.js"></script>
    <script src="../../element/index.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="../../element/moment.min.js"></script>

    <style>
          .zebra-table tbody tr:nth-child(even) {
            background-color: #edecec; /* 设置偶数行的背景颜色 */
        }
            .status-gray {
            color: gray;
            }
            .status-agree {
            color: green;
            }

            .status-reject {
            color: red;
            }

            .status-unhandled {
            color: grey;
            }

        .el-input {
            width: 200px;
        }
    </style>
</head>
<link rel="stylesheet" href="../../css/evaluate.css">
<link rel="stylesheet" href="../../css/table.css">

<body>
    <div id="app">
        <h2 style="text-align: center;">募捐材料审核</h2>

        <el-dialog :visible.sync="showEvaluation" title="评价信息">
            
            <div v-for="(item, index) in expandRowData" :key="index" class="outer-content">
              <div class="left-content">
               <p><h3>募捐单ID: 同盾{{ item.donationId }}号募捐单</h3></p>
                <p><strong>申请ID:</strong> {{ item.requestId }}</p>
                <p><strong>时间:</strong> {{ item.time.substring(0, 10) }}</p>
                <p><strong>状态:</strong> <strong>{{ item.reply }}</strong></p>
              </div>
              <div class="right-content">
                <el-table :data="item.list">
                  <el-table-column label="评价人账号" prop="userId"></el-table-column>
                  <el-table-column label="建议情况" prop="status"></el-table-column>
                  <el-table-column label="评价金额" prop="donationAmount"></el-table-column>
                  <el-table-column label="评价内容" prop="message"></el-table-column>
                </el-table>
              </div>
            </div>
      </el-dialog>

      <el-row  class="custom-row" style="color: #B8860B;">
        <el-col :span="4">
            <el-select v-model="filterStatus" placeholder="请选择状态">
                <el-option label="未审核" value=1></el-option>
                <el-option label="已审核" value=2></el-option>
            </el-select>
        </el-col>    
            <el-col :span="5">
              最低金额:<el-input v-model="minAmount" placeholder="最低金额"></el-input>
            </el-col>
            <el-col :span="5">
              最高金额:<el-input v-model="maxAmount" placeholder="最高金额"></el-input>
            </el-col>
            <el-col :span="5">
              募捐人:<el-input v-model="searchName" placeholder="募捐人"></el-input>
            </el-col>
            <el-col :span="5">
              <el-button @click="searchData" style="background-color:#B8860B ; color: #1F1F1F;">查询</el-button>
            </el-col>
          </el-row>
        <!-- 换行要一定的间隔 -->
        
        <el-table class="zebra-table" :data="tableData" :default-sort="{ order: 'ascending'}">
            <el-table-column prop="requestId" label="申请单号" ></el-table-column>
            <el-table-column v-if="false" prop="donationId" label="募捐单号" ></el-table-column>
            <el-table-column label="募捐人" prop="donationImage">
                <template slot-scope="scope">
                  <img :src="`http://${scope.row.donationImage}`" style="width: 50px; height: 50px;" />
                  <p>{{ scope.row.alias }} {{ scope.row.age }}岁</p>
                </template>
              </el-table-column>
            <el-table-column prop="time" label="申请时间" sortable></el-table-column>
            <el-table-column prop="deadline" label="截止时间" sortable></el-table-column>
            <el-table-column prop="donationAmount" label="求助金额" sortable></el-table-column>
            <el-table-column prop="pointsSum" label="材料积分" sortable></el-table-column>
            <el-table-column prop="totalReviewCount" label="审核次数" sortable></el-table-column>
            <el-table-column prop="agree" label="同意率"></el-table-column>
            <el-table-column prop="reply" label="结果">
                <template slot-scope="scope">
                  <span :class="getStatusClass(scope.row.reply)">{{ scope.row.reply || '未处理' }}</span>
                </template>
              </el-table-column>
              
              
            <el-table-column label="操作">
                <template slot-scope="scope">
                <el-button type="primary" @click="handleRowExpand(scope.row)" style="margin-bottom: 10px;">查看评价</el-button>
                <el-button type="text" @click="goToSubmitDonation(scope.row)">进入募捐详情页面</el-button>
                    <!--修改金额对话框-->
                    <el-dialog :visible.sync="dialogVisible">
                        <el-form :model="form" label-width="80px">
                            <el-form-item label="修改金额">
                                <el-input v-model="form.amount"></el-input>
                            </el-form-item>
                            <el-form-item label="修改原因">
                                <el-input v-model="form.reason"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="handleModify">确 定</el-button>
                        </div>
                    </el-dialog>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                showEvaluation:false,
                expandRowData: {},
                filterStatus:'1',
                scope:"",
                requestId: '',
                minAmount: '',
                maxAmount: '',
                searchName: '',
                minReviewCount: '',
                minAgreeRate: '',
                maxAgreeRate: '',
                dialogVisible: false,
                form: {
                    amount: '',
                    reason: ''
                },
                tableData: [],
                List: []
            },
            created() {
                this.fetchData();
            },
            watch: {
                filterStatus: function (newVal, oldVal) {
                    this.filter(); // 监听filterStatus的变化，并在变化时调用filter()方法
                }
            },
            methods: {
                goToSubmitDonation(row){
                    index = this.tableData.indexOf(row);
                    localStorage.setItem("index", index);
                    localStorage.setItem("requestId", row.requestId);
                    // 在这里编写跳转逻辑
                    localStorage.setItem("donationId", row.donationId);
                    window.location.href = "../publicManage/checkDontion.html";
                },
                //样式函数
                getStatusClass(reply) {
                    if (reply && reply.startsWith('同意')) {
                        return 'status-agree';
                    } else if (reply && reply.startsWith('驳回')) {
                        return 'status-reject';
                    } else {
                        return 'status-unhandled';
                    }
                },
                filter(){
                        if (this.filterStatus === '0'||this.filterStatus === '') {
                            this.tableData = this.List; // 不进行筛选
                        }
                        else if(this.filterStatus === '1'){
                            this.tableData = this.List.filter(item => !item.reply||item.reply===''); // reply 为空的项
                        }
                        else if(this.filterStatus === '2'){
                            this.tableData = this.List.filter(item => item.reply); // reply 不为空的项
                        }
                         let donationIds = this.tableData.map(item => item.donationId);
                        localStorage.setItem("donationIds", JSON.stringify(donationIds));
                    },
                fetchData() {
                    // 调用后端接口获取待评议列表数据
                    axios.get('http://localhost:8888/api/donations/checkList', {
                        params: {
                            minAmount: this.minAmount,
                            maxAmount: this.maxAmount,
                            name: this.searchName
                        }
                    })
                        .then(response => {
                            if (response.data.code === 0) {
                                response.data.data.forEach(item => {
                                    item.time = moment(item.time).format('YYYY-MM-DD');
                                    item.deadline = moment(item.deadline).format('YYYY-MM-DD');
                                    item.totalReviewCount = item.agreeCount + item.rejectCount;
                                    if(item.agreeCount + item.rejectCount==0){
                                        item.agree = 0+'%';
                                    }
                                    else                                       
                                     item.agree = parseInt(item.agreeCount / (item.agreeCount + item.rejectCount) * 100) + '%';

                                });
                                this.List = response.data.data;
                                this.filter()
                                this.requestId = response.data.data[0].requestId;
                            } else {
                                console.error(response.data.message);
                            }
                        })
                        .catch(error => {
                            console.error(error);
                        });
                },

                searchData() {
                    this.fetchData();
                    const filteredData = this.tableData.filter(item => {
                        return (item.求助金额 >= this.minAmount || !this.minAmount) &&
                            (item.求助金额 <= this.maxAmount || !this.maxAmount) &&
                            (item.募捐人.includes(this.searchName) || !this.searchName) &&
                            (parseFloat(item.同意率) >= parseFloat(this.minAgreeRate) || !this.minAgreeRate) &&
                            (parseFloat(item.同意率) <= parseFloat(this.maxAgreeRate) || !this.maxAgreeRate) &&
                            (item.管理员审核次数 >= this.minReviewCount || !this.minReviewCount)
                    });
                    // 更新表格数据
                    this.tableData = filteredData;
                },
                handleRowExpand(row) {
                    this.showEvaluation = !this.showEvaluation;
                    // 发起请求获取评价数据
                    if (row) {
                        axios.get('http://localhost:8888/api/evaluate/getAllByDonationId', {
                            params: {
                                donationId: row.donationId
                            }
                        })
                            .then(response => {
                                this.loading = false;
                                if (response.data.code === 0) {
                                    this.expandRowData = response.data.data;

                                } else if (response.data.code === 2) {
                                    this.expandRowData = [];
                                } else {
                                    this.expandRowData = null;
                                }
                            })
                            .catch(error => {
                                this.loading = false;
                                console.error('请求出错：', error);
                            });
                    }
                },
                canReject(row) {
                    return (row['totalReviewCount'] * parseFloat(row['agree'])) > 1;
                },
                modifyAmount(row) {
                    this.form.amount = '';
                    this.form.reason = '';
                    this.dialogVisible = true;
                    this.currentRow = row;
                },
                handleModify() {
                    // 处理修改金额逻辑，调用后端接口进行修改操作  
                    this.dialogVisible = false;
                }
            }
        });
    </script>
</body>

</html>